<template>
  <div class="information">
    <x-header>客户信息查询</x-header>
    <div class="information-header">
      <div class="information-header-item" :class="selectType == 1?'btn-public':''" @click="onLineAndLocal(1)">在线</div>
      <div class="information-header-item" :class="selectType == 2?'btn-public':''" @click="onLineAndLocal(2)">本地</div>
    </div>
    <div class="information-content">
      <div class="information-item">
        <div class="information-item-title">客户名称：</div>
        <input class="information-item-input" type="text" v-model="CUST_NAME" maxlength="64" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">客户编号：</div>
        <input class="information-item-input" type="text" v-model="CUST_NO" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">用户名称：</div>
        <input class="information-item-input" type="text" v-model="CONS_NAME" maxlength="64" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">用户编号：</div>
        <input class="information-item-input" type="text" v-model="CONS_NO" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">用户地址：</div>
        <input class="information-item-input" type="text" v-model="CONS_ADDR" maxlength="64" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">联系电话：</div>
        <input class="information-item-input" type="text" v-model="TEL" maxlength="11" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">出厂编号：</div>
        <input class="information-item-input" type="text" v-model="METER_NO" maxlength="16" placeholder="请录入" value="">
        <img class="information-item-icon" src="../../assets/img/securityCheckImg/sao.png" alt="" @click.stop="scanAction">
      </div>
      <div class="information-item">
        <div class="information-item-title">用户类型：</div>
         <popup-picker class="information-item-input" :data="CONS_LIST" show-name v-model="CONS_SORT_CODE" @on-show="onShow" @on-hide="onHide" @on-change="onPopupChange($event,'CONS')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">抄表册名称：</div>
        <input class="information-item-input" type="text" v-model="MR_SECT_NAME" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">抄表册编号起：</div>
        <input class="information-item-input" type="text" v-model="MR_SECT_NO_BGN " maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">抄表册编号至：</div>
        <input class="information-item-input" type="text" v-model="MR_SECT_NO_BGN" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">证件类型：</div>
         <popup-picker class="information-item-input" :data="CERT_TYPE_LIST" show-name v-model="CERT_TYPE" @on-show="onShow" @on-hide="onHide" @on-change="onPopupChange($event, 'CERT')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">证件号码：</div>
        <input class="information-item-input" type="text" v-model="CERT_NUM" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">用户状态：</div>
         <popup-picker class="information-item-input" :data="CONS_STAT_LIST" show-name v-model="CONS_STAT" @on-show="onShow" @on-hide="onHide" @on-change="onPopupChange($event, 'STAT')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div style="height: 1.4rem;"></div>
    </div>
    <div class="information-footer">
      <div class="information-submit btn-public" @click="bindSubmit">
      查询
    </div>
    </div>
    
  </div>
</template>

<script>
import { XHeader, PopupPicker } from "vux";
import { getsn } from "@/utils/getsn";
import { callNet } from "@/utils/androidApi";
import { UserInfo } from "@/utils/public";
import { initDB } from "@/utils/publicTable.js";
import { scanNewMeterAction } from "@/utils/sqlOperation";
import Vue from "vue";
export default {
  data() {
    return {
      selectType: 1,
      CONS_SORT_CODE: [],
      CONS_LIST: [],
      CERT_TYPE: [],
      CERT_TYPE_LIST: [],
      CONS_STAT: [],
      CONS_STAT_LIST: [],
      TS_TYPE: "",
      CUST_NAME: "",
      CUST_NO: "",
      CONS_NAME: "",
      CONS_NO: "",
      CONS_ADDR: "",
      TEL: "",
      APP_NO: "",
      MR_SECT_NAME: "",
      MR_SECT_NO_BGN: "",
      MR_SECT_NO_BGN: "",
      CERT_NUM: ""
    };
  },
  components: {
    XHeader,
    PopupPicker
  },
  methods: {
    scanAction() {
      scanNewMeterAction("METER_NO", this.scanCallback);
    },
    scanCallback(filed, codeStr) {
      if (filed == "METER_NO") {
        Vue.set(this, "METER_NO", codeStr);
      }
    },
    onPopupChange(val, str) {
      switch (str) {
        case "CONS":
          this.CONS_SORT_CODE = val;
          break;
        case "CERT":
          this.CERT_TYPE = val;
          break;
        case "STAT":
          this.CONS_STAT = val;
          break;
        default:
          break;
      }
    },
    onShow() {
      console.log("on show");
    },
    onHide(type) {
      console.log("on hide", type);
    },
    onLineAndLocal(flag) {
      Vue.set(this, "selectType", flag);
    },

    bindSubmit() {
      console.log(this.CONS_SORT_CODE.length);
      if (
        this.APP_NO == "" &&
        this.CUST_NO == "" &&
        this.CUST_NAME == "" &&
        this.CONS_NAME == "" &&
        this.CONS_NO == "" &&
        this.CONS_ADDR == "" &&
        this.TEL == "" &&
        this.MR_SECT_NAME == "" &&
        this.MR_SECT_NO_BGN == "" &&
        this.CERT_NUM == "" &&
        this.CONS_SORT_CODE.length == 0 &&
        this.CERT_TYPE.length == 0 &&
        this.CONS_STAT.length == 0
      ) {
        this.$vux.toast.text("至少输入一个查询条件");
        return;
      }
      let params = "";
      if (this.selectType == 1) {
        params = {
          data: {
            SID: UserInfo.SID,
            DATA: {
              DUTY_ID: UserInfo.DUTY_ID,
              TS_TYPE: this.TS_TYPE,
              APP_NO: "",
              PAGE_NO: "1",
              GAS_NARURE: "",
              CUST_NO: this.CUST_NO,
              CUST_NAME: this.CUST_NAME,
              CONS_NO: this.CONS_NO,
              CONS_NAME: this.CONS_NAME,
              CONS_ADDR: this.CONS_ADDR,
              TEL: this.TEL,
              METER_NO: this.METER_NO,
              CONS_SORT_CODE: this.CONS_SORT_CODE[0],
              MR_SECT_NAME: this.MR_SECT_NAME,
              MR_SECT_NO_BGN: this.MR_SECT_NO_BGN,
              CERT_TYPE: this.CERT_TYPE[0],
              CERT_NUM: this.CERT_NUM,
              CONS_STAT: this.CONS_STAT[0]
            },
            SERVICE_ID: "RCS010",
            USER: UserInfo.USER,
            PWD: UserInfo.PWD
          }
        };
      } else {
        params = {
          CUST_NO: this.CUST_NO,
          CUST_NAME: this.CUST_NAME,
          CONS_NO: this.CONS_NO,
          CONS_NAME: this.CONS_NAME,
          CONS_ADDR: this.CONS_ADDR,
          TEL: this.TEL,
          METER_NO: this.METER_NO,
          CONS_SORT_CODE: this.CONS_SORT_CODE[0],
          MR_SECT_NAME: this.MR_SECT_NAME,
          MR_SECT_NO_BGN: this.MR_SECT_NO_BGN,
          CERT_TYPE: this.CERT_TYPE[0],
          CERT_NUM: this.CERT_NUM,
          CONS_STAT: this.CONS_STAT[0]
        };
      }
      this.$router.push({
        path:
          "/archives?params=" +
          JSON.stringify(params) +
          "&type=" +
          this.selectType
      });
    }
  },
  mounted() {
    initDB();
    const _that = this;
    // 用户类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpConsSortCode"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          console.log("查询成功", msg);
          if (msg.result.length != 0) {
            const CONS_LIST = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_that, "CONS_LIST", [CONS_LIST]);
          } else {
            Vue.set(_that, "CERT_TYPE_LIST", []);
          }
        }
      }
    );
    // 证件类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["cdReCertType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          if (msg.result.length != 0) {
            const CERT_TYPE_LIST = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_that, "CERT_TYPE_LIST", [CERT_TYPE_LIST]);
          } else {
            Vue.set(_that, "CERT_TYPE_LIST", []);
          }
        }
      }
    );
    // 用户状态
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpConsStat"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          if (msg.result.length != 0) {
            const CONS_STAT_LIST = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_that, "CONS_STAT_LIST", [CONS_STAT_LIST]);
          }
        } else {
          Vue.set(_that, "CERT_TYPE_LIST", []);
        }
      }
    );
  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
.information {
  width: 100%;
  overflow: hidden;
  .information-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.2rem;
  }
  .information-header-item {
    width: 4.7222rem;
    height: 0.8333rem;
    background-color: white;
    font-size: 0.3888rem;
    color: #159bfd;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #159bfd 1px solid;
  }
  .information-footer {
    width: 100%;
    height: 1rem;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
  }
  .information-submit {
    width: 80%;
    height: 1rem;
    position: absolute;
    bottom: 0;
    left: 10%;
    border-radius: 0.2rem;
  }
}
</style>
<style>
@import "../../assets/less/vuxStyle.less";
</style>



